<template>
	<div class="workorder">
		<div>
			<Crumbs title="租户管理" sub-title="多租户管理" />
		</div>
		<div class="main">
			<el-row>
				<el-form :inline="true">
					<el-form-item label="租户名称">
						<el-input v-model="searchFormData.compName" placeholder="请输入租户名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="租户类型">
						<el-select v-model="searchFormData.roleId" placeholder="请选择租户类型">
							<el-option v-for="role in roleOptions" :key="role.roleId" :label="role.roleName" :value="role.roleId"/>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="default" @click="reset">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="showCreateDialog">新增</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="remove" :disabled="batchDeleteDisabled">批量删除</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<el-table :data="tableData" size="small" v-loading="tableLoading" @select-all="selectAll" @select="rowSelect">
					<el-table-column type="selection" align="center" />
					<el-table-column prop="groupName" label="集团名称" align="center" />
					<el-table-column prop="compName" label="租户名称" align="center" />
					<el-table-column prop="enterprise" label="企业统一社会信用代码" align="center" width="140" />
					<el-table-column prop="userName" label="账号名称" align="center" />
					<el-table-column prop="realName" label="姓名" align="center" />
					<el-table-column prop="email" label="邮箱" align="center" width="160" />
					<el-table-column prop="phonenumber" label="手机号" align="center" />
					<el-table-column prop="createTime" label="创建时间" align="center" width="150" />
					<el-table-column label="租户状态" align="center">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.enableStatus" active-value="1" inactive-value="0"
								@change="stateSwitch(scope.row)" />
						</template>
					</el-table-column>
					<el-table-column prop="roleName" label="租户类型" align="center" />
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button @click="showEditDialog(scope.row)" type="text">编辑</el-button>
							<el-button type="text" @click="remove(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-row>
			<!-- 分页 -->
			<p>
				<el-pagination background @size-change="pageSizeChange" @current-change="currentPageChange"
					:current-page="searchFormData.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="searchFormData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="searchFormData.total">
				</el-pagination>
			</p>
			<!-- 新增弹窗 -->
			<el-dialog title="租户新增" width="30%" :visible.sync="createDialogVisible">
				<el-form label-width="180px">
					<el-form-item label="集团名称:" required>
						<el-select v-model="createFormData.groupId" placeholder="请选择集团名称" clearable @change="groupChange">
							<el-option v-for="item in groupOtpions" :key="item.optionValue" :label="item.optionText" :value="item.optionValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="租户名称:" required>
						<el-select v-model="createFormData.companyId" placeholder="请选择公司名称" clearable>
							<el-option v-for="item in compOptions" :key="item.optionValue" :label="item.optionText" :value="item.optionValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="企业统一社会信用代码:">
						<el-input v-model="createFormData.enterprise" placeholder="请输入企业统一社会信用代码" />
					</el-form-item>
					<el-form-item label="账号名称:" required>
						<el-input v-model="createFormData.userName" placeholder="输入账号名称" />
					</el-form-item>
					<el-form-item label="账号密码:" required>
						<el-input type="password" v-model="createFormData.password" placeholder="建议使用两种及两种以上的字符组合"/>
					</el-form-item>
					<el-form-item label="姓名:">
						<el-input v-model="createFormData.realName" placeholder="您的真实姓名" />
					</el-form-item>
					<el-form-item label="邮箱:">
						<el-input v-model="createFormData.email" placeholder="输入邮箱" />
					</el-form-item>
					<el-form-item label="手机号码:">
						<el-input v-model="createFormData.phonenumber" placeholder="输入手机号码" />
					</el-form-item>
					<el-form-item label="租户状态:" required>
						<el-radio v-model="createFormData.enableStatus" :label="1">启用</el-radio>
						<el-radio v-model="createFormData.enableStatus" :label="0">停用</el-radio>
					</el-form-item>
					<el-form-item label="租户类型:" required>
						<el-select v-model="createFormData.roleId" placeholder="请选择租户类型" clearable>
							<el-option v-for="role in roleOptions" :key="role.roleId" :label="role.roleName" :value="role.roleId"/>
						</el-select>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="createDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="create">确 定</el-button>
				</span>
			</el-dialog>
			
			<!-- 编辑弹窗 -->
			<el-dialog title="租户编辑" width="30%" :visible.sync="editDialogVisible">
				<el-form label-width="180px">
					<el-form-item label="集团名称:" required>
						<el-select v-model="editFormData.groupId" placeholder="请选择集团名称" clearable 
							@change="groupChange" disabled>
							<el-option v-for="item in groupOtpions" :key="item.optionValue" :label="item.optionText" :value="item.optionValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="租户名称:" required>
						<el-select v-model="editFormData.companyId" placeholder="请选择公司名称" clearable disabled>
							<el-option v-for="item in compOptions" :key="item.optionValue" :label="item.optionText" :value="item.optionValue" />
						</el-select>
					</el-form-item>
					<el-form-item label="企业统一社会信用代码:">
						<el-input v-model="editFormData.enterprise" placeholder="请输入企业统一社会信用代码" />
					</el-form-item>
					<el-form-item label="账号名称:" required>
						<el-input v-model="editFormData.userName" placeholder="输入账号名称" disabled/>
					</el-form-item>
					<el-form-item label="账号密码:" required>
						<el-input type="password" v-model="editFormData.password" placeholder="请填入新密码,空白表示不修改密码" />
					</el-form-item>
					<el-form-item label="姓名:">
						<el-input v-model="editFormData.realName" placeholder="您的真实姓名" />
					</el-form-item>
					<el-form-item label="邮箱:">
						<el-input v-model="editFormData.email" placeholder="输入邮箱" />
					</el-form-item>
					<el-form-item label="手机号码:">
						<el-input v-model="editFormData.phonenumber" placeholder="输入手机号码" />
					</el-form-item>
					<el-form-item label="租户状态:" required>
						<el-radio v-model="editFormData.enableStatus" label="1">启用</el-radio>
						<el-radio v-model="editFormData.enableStatus" label="0">停用</el-radio>
					</el-form-item>
					<el-form-item label="租户类型:" required>
						<el-select v-model="editFormData.roleId" placeholder="请选择租户类型" clearable>
							<el-option v-for="role in roleOptions" :key="role.roleId" :label="role.roleName" :value="role.roleId"/>
						</el-select>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="editDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="edit">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				searchFormData: {
					compName: '', //租户名称
					roleId: '', //租户类型
					pageSize: 10,
					pageNum: 1,
					total: 0
				},
				
				createFormData: {
					enableStatus: 1
				},
				editFormData: {
					
				},
				tableData: [],
				multipleSelection: [], //被选中的行
				createDialogVisible: false, //是否显示新建窗口
				editDialogVisible: false, //是否显示编辑窗口
				groupOtpions: [] ,//集团下拉选项
				roleOptions: [], //角色下拉选项
				compOptions: [] ,//公司下拉选项
				tableLoading: false //表格加载中
			};
		},
		created() {
			this.loadData();
			this.loadRoleOptions();
		},
		methods: {
			showCreateDialog() { //打开新增窗口
				this.createFormData = { enableStatus: 1},
				this.loadGroupOptions()
				this.loadRoleOptions();
				this.createDialogVisible = true
			},
			showEditDialog(row) { //打开编辑窗口
				this.loadGroupOptions()
				this.loadRoleOptions();
				this.loadCompOptions(row.groupId) //根据集团查公司
				this.editFormData = {...row};
				this.editFormData.password = '';
				this.editDialogVisible = true
			},
			pageSizeChange(newSize) { // 监听分页pagesize改变
				this.searchFormData.pageNum = 1
				this.searchFormData.pageSize = newSize
				this.loadData()
			},
			currentPageChange(newPage) { //监听页码变化
				this.searchFormData.pageNum = newPage
				this.loadData()
			},
			selectAll(list) { //选择所有行
				this.multipleSelection = [...list];
			},
			rowSelect(list) { //选择某一行
				this.multipleSelection = [...list];
			},
			async remove(row) { //删除某一行 或 多行
				let res = await this.$confirm('确认删除该账户吗?', '提示', { type: 'error'}).catch(e => e)
				if(res == 'confirm') {
					let userIds = row.userId ? row.userId : this.multipleSelection.map(u=>u.userId).join(",")
					this.$http({
						url: `/api/tenant/muser/${userIds}`
					}).then( res => {
						this.$message.success('删除成功')
						this.loadData();
					})
				}
			},
			stateSwitch(row) { //账户的启用或停用
				this.$http({
					url: '/api/tenant/muser/changeStatus',
					method: 'POST',
					data: {
						"enableStatus": row.enableStatus,
						"userId": row.userId
					}
				}).then( res => {
					this.createDialogVisible = false;
					this.$message.success('操作成功')
				}).catch(e=>{
					row.enableStatus = row.enableStatus == 1 ? 0 : 1;
				})
			},
			create() { // 保存新增数据
				this.$http({
					url: '/api/tenant/muser/add',
					method: 'POST',
					data: this.createFormData
				}).then( res => {
					this.createDialogVisible = false;
					this.loadData();
				})
			},
			edit() { // 保存编辑数据
				this.$http({
					url: '/api/tenant/muser/edit',
					method: 'POST',
					data: this.editFormData
				}).then( res => {
					this.editDialogVisible = false;
					this.loadData();
				})
			},
			search() { //搜索
				this.loadData();
			},
			reset() { //重置
				this.searchFormData.compName = "";
				this.searchFormData.roleId = "";
				this.searchFormData.pageNum = 1;
				this.loadData()
			},
			loadData() { //加载表格数据，租户列表
				this.tableLoading = true;
				this.$http({
					url: '/api/tenant/muser/list',
					method: 'post',
					data: this.searchFormData
				}).then(res => {
					this.tableData = res.data.rows
					this.searchFormData.total = res.data.total
					this.tableLoading = false;
				})
			},
			loadRoleOptions() { //加载角色下拉选项
				this.$http({
					url: '/api/system/role/list',
				}).then(res => {
					this.roleOptions = res.data.data;
				})
			},
			loadGroupOptions() { //加载集团下拉选项
				this.$http({
					url: '/api/system/dept/selectList',
					method: 'POST',
					data: {
						deptType: 1
					}
				}).then(res => {
					this.groupOtpions = res.data.data
				})
			},
			loadCompOptions(pid) { //根据集团ID，加载公司下拉选项
				this.$http({
					url: '/api/system/dept/selectList',
					method: 'POST',
					data: {
						parentId: pid,
						deptType: 2
					}
				}).then(res => {
					this.compOptions = res.data.data
				})
			},
			groupChange(val) { //集团下拉更换，级联加载公司
				if(val) {
					this.loadCompOptions(val)
				} else {
					this.compOptions = [];
				}
			}
		},
		computed: {
			batchDeleteDisabled() {
				return this.multipleSelection.length == 0;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.workorder {
		height: calc(100vh - 100px);
		background-color: #f8f8f8;
		padding: 5px 30px 10px;

		.main {
			height: 92%;
			background-color: white;
			overflow-y: auto;
			box-sizing: border-box;
			padding: 20px;
		}

		.paging {
			position: absolute;
			top: 315px;
			left: 340px;
		}
	}
</style>
